<template>
  <div>
    <!-- 全局右键弹窗 id="rightMenuid"-->
    <transition name="page">
      <div class="right-menu bg_white text_center tc_333 fs_12  global_menu"
        :style="{ left: props.menuPosX + 'px', top: props.menuPosY + 'px' }" v-show="globalRightMenuShow">
        <ul>
          <li class="tc_hover_blue"
            v-for="(global, index) in menuList.globalMenu.filter((item: any) => { return item.eventEmitParent })"
            :key="index" @click.stop="$emit(global.eventName, $event)">{{ global.title }}</li>
          <li class="tc_hover_blue"
            v-for="(global, index) in menuList.globalMenu.filter((item: any) => { return !item.eventEmitParent })"
            :key="index" @click.stop="menuMethods[global.eventName]">{{ global.title }}</li>
          <li class="tc_hover_blue" v-if="isCoppied" @click.stop="$emit('paste', $event)">粘贴</li>
          <li v-if="props.isMoreSelect && componentsFrom != 'share'" @click.stop="$emit('cancleSelect', $event)">取消选择
          </li>
          <li class="tc_hover_blue" v-if="!props.isMoreSelect && componentsFrom != 'share'"
            @click.stop="$emit('selectAll', $event)">全选</li>
        </ul>
      </div>
    </transition>
    <!-- 文件及文件夹右键弹窗 -->
    <transition name="page">
      <div class="right-menu bg_white text_center tc_333 fs_12 item_menu"
        :style="{ left: props.menuPosX + 'px', top: props.menuPosY + 'px' }" v-show="itemMenuShow">
        <!-- 有多选和全选操作 -->
        <ul v-if="props.isMoreSelect">
          <li class="tc_hover_blue" @click.stop="$emit('reductionAllFile', $event)"
            v-if="props.isMoreSelect && componentsFrom == 'del'">还原所选</li>
          <li class="tc_hover_blue" @click.stop="$emit('deleteSeleted', $event)" v-if="props.isMoreSelect">{{
              componentsFrom == 'del' ? '彻底删除所选' : '删除所选'
          }}</li>
          <li class="tc_hover_blue" @click.stop="$emit('cancleSelect', $event)" v-if="props.isMoreSelect">取消选择</li>
        </ul>
        <ul v-else>
          <li v-for="(item, indx) in  menuList.listItemMenu.filter((item: any) => { return item.eventEmitParent })"
            :key="indx" class="downLoad_content" @mouseenter="showSubMenuRole(item)"
            @click.stop="$emit(item.eventName, $event)">
            <span>{{ item.title }}</span>
            <div v-if="item.subMenuType == 'shareLink'" class="share_link_wrap sub_tip_wrap"
              :class="{ hide_menu: hideDownMenushare, translaten108: props.menuPosX > 450, translate40: props.menuPosX < 450 }">
              <h2 style="text-align: initial;
              margin: 0 0 10px 35px;
              color: #fff;">分享链接</h2>
              <p class="ptn_out">
                <input type="text" name="" id="" v-model="props.shareUrl" disabled>
                <span @click.stop="coppyUrl" class="fuzhiicon"
                  :class="{ ' bg_7a84ff': isUrlCopied, ' bg_a8afff': !isUrlCopied }">
                  <i class="appIcon-iconfont"
                    :class="{ 'appIcon-fuzhichenggong': isUrlCopied, 'appIcon-fuzhilianjie1': !isUrlCopied }"></i>
                </span>
              </p>
              <div class="copy"></div>
            </div>

            <!-- 下载菜单 -->
            <!-- @click.stop="subMenuEvent[load.eventName]" -->
            <div v-if="item.subMenuType == 'download'" class="downLoad_wrap sub_tip_wrap "
              :class="{ hide_menu: hideDownMenu, translaten110: props.menuPosX > 450, translate110: props.menuPosX < 450 }">
              <p v-for="(load, ins) in item.subMenu" :key="ins" @click="$emit(load.eventName, $event)"
                class="tc_hover_blue">
                {{ load.title }}
              </p>
            </div>
          </li>
          <li v-for="sitem in menuList.listItemMenu.filter((item: any) => { return !item.eventEmitParent })"
            :key="new Date().getTime()" class="downLoad_content" @mouseenter="showSubMenuRole(item)"
            @click.stop="menuMethods[item.eventName]">
            <span>{{ item.title }}</span>
          </li>

          <!-- {
	// 		title: '删除',
	// 		eventName: 'deleteAll',
	// 		eventEmitParent: true,
	// 		id: 1
	// 	} -->
        </ul>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { copyText, readClipboard } from '@/utils/clipboard'
import { withDefaults, ref, onMounted, computed, reactive, watch } from "vue";
const emits = defineEmits(["refurbish", 'selectAll', 'newCreate', 'menuShareMember', 'cancleSelect', 'reName', 'paste', 'cancleShare', 'reductionFile', 'deleteItem', 'reductionAllFile', 'deleteSeleted', 'copyFile', 'calcleShareMember', 'cancleShareContent']);
const props = withDefaults(
  defineProps<{
    menuPosX?: number;
    menuPosY?: number;
    globalRightMenuShow?: any;
    itemMenuShow?: any;
    shareUrl: string;
    menuList: any;
    isMoreSelect: any,
    apiUrl: any,
    isCoppied: any,
    currentItemObj: any,
    currentMultipleList: any,
    componentsFrom: any
  }>(),
  {
    globalRightMenuShow: false,
    isMoreSelect: false,
    itemMenuShow: false,
    isCoppied: false,
    menuPosX: 0,
    menuPosY: 0,
    currentItemProps: [],
    shareUrl: '',
    menuList: [],
    apiUrl: '',           //请求的接口地址
    currentItemObj: {},    //当前操作的列表item
    currentMultipleList: [],  //多选全选的文件列表i
    componentsFrom: 'del'
  }
);

const hideDownMenu = ref(false)
const hideDownMenushare = ref(false)
const isUrlCopied = ref(false)

const menuMethods = {

}

watch(
  props,
  () => {
    hideDownMenu.value = false
    hideDownMenushare.value = false
    isUrlCopied.value = false
  }
)
// const subMenuEvent = reactive({
//   xiazaipptx,
//   xiazaipdf,
//   xiazaijpg
// })
// 二级菜单的显示规则 hover方式
const showSubMenuRole = (item: any) => {
  if (item.subMenuType == 'shareLink') {
    hideDownMenushare.value = true
    hideDownMenu.value = false
  } else if (item.subMenuType == 'download') {
    hideDownMenu.value = true
    hideDownMenushare.value = false
  } else {
    hideDownMenu.value = false
    hideDownMenushare.value = false
  }
}

const coppyUrl = () => {
  if (isUrlCopied.value) {
    isUrlCopied.value = false
    copyText(props.shareUrl).then((res: any) => {
      res.clearSelection()
    })
  } else {
    isUrlCopied.value = true
    copyText(props.shareUrl).then((res: any) => {
    })
  }
}

</script>

<style lang="scss" scoped>
.bg_white {
  background: #fff;
}

.translaten108 {
  transform: translateX(-108%);
}

.translate40 {
  transform: translateX(40%);
}

.translaten110 {
  transform: translateX(-120%);
}

.translate110 {
  transform: translateX(110%);
}

.text_center {
  text-align: center;
}

.tc_333 {
  color: #333;
}

.fs_12 {
  font-size: 12px;
}

.tc_hover_blue:hover {
  // color: #5864ff;
}

.right-menu {
  padding: 10px 0;
  position: fixed;
  width: 140px;
  box-shadow: 0px 0px 10px 0px rgba(13, 14, 55, 0.4);
  border-radius: 7px;
  z-index: 101;
  background-color: #1E2330;

  ul {
    li {
      line-height: 40px;
      position: relative;
      margin: 0 8px;
      transition: all 0.3s;
      cursor: pointer;
      font-size: 16px;
      color: #fff;

      a {
        color: #ACB6C7;
      }
    }

    li:hover {
      background: #242B3E;
      border-radius: 6px;

      // a {
      //   color: #5864ff;
      // }
    }
  }
}

/* 淡入淡出 */
.page-enter-active,
.page-leave-active {
  transition: opacity .05s;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

.tc_hover_blue:hover {
  // color: #7A84FF;
}

.hide_menu {
  display: block !important;
}

.downLoad_content {
  position: relative;

  .sub_tip_wrap {
    background: #1E2330;
    box-shadow: 0px 0px 10px 0px rgb(88 100 255 / 20%);
    border-radius: 14px;
    z-index: 101;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 40px;
    transition: all 0.3s;
    // cursor: pointer;
  }

  .downLoad_wrap {
    width: 140px;
    // transform: translateX(-120%);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .share_link_wrap {
    width: 370px;
    // transform: translateX(108%);
    padding-top: 10px;
    padding-bottom: 30px;

    .ptn_out {
      position: relative;

      input {
        padding-left: 20px;
        width: 310px;
        height: 46px;
        background: #1E2330;
        border: 1px solid #515151;
        border-radius: 10px;
      }

      span {
        display: inline-block;
        height: 46px;
        width: 46px;
        position: absolute;
        border-radius: 10px;
        top: 0;
        right: 30px;
        color: #fff;
      }

      .fuzhiicon {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.bg_a8afff {
  background: #4355dc;
}

.bg_7a84ff {
  background: #4355dc;
}
</style>